import {Component, OnInit} from '@angular/core';
import {HttpService} from "../share/http.service";
import {url} from "../share/url";
import {flyIn} from "../animations/flyIn";

@Component({
  selector: 'app-public-article',
  templateUrl: './public-article.component.html',
  styleUrls: ['./public-article.component.css'],
  animations:[
    flyIn
  ]
})
export class PublicArticleComponent implements OnInit {
  // public getArticleUrl: string = url.url+'/app2/web/manage/news/list';
  public getArticleUrl: string = 'http://rapapi.org/mockjsdata/23342/web/manage/news/list';
  public getArticleListsParams: any = {page: 0, size: 10, sort: "id"};
  public deleteArticleUrl: string = url.url+'/app2/web/manage/news/delete';
  public uniqueHttpUrl: any = {httpPost: false, httpGet: false, httpPut: false};
  public theads: Array<any> = ["文章名", "发布时间", "目录", "操作"];
  public richText: string;//用来获取特定文章内容参数,并在modal中展示在富文本编辑器中
  public onlyOne: string = 'needOne';//用来控制页面显示几个富文本编辑器
  public inputValue = {articleTitle: '', newsDir: 2, catagoryId: 1};
  public publicArticleUnique: string = 'publicArticle';
  public articleLists: Array<any> = [];
  //用来设置是否显示第二个图片上传插件
  public showSecondImageUpload: boolean = true;
  public publicArticleImage: Array<any> = [];
  //用来控制loading显示与否
  public showLoading: boolean = true;
  //用来控制图片
  public produceImage: any = [];
  //用来指定特定文章id
  public articleId: number;

  constructor(private http: HttpService) {
  }

  newsTitle(event) {
    this.inputValue.articleTitle = event.target.value
  }

  newsDirectory(event) {
    console.log(event.target.value);
    this.inputValue.newsDir = event.target.value;
  }


  public showBoolean = false;//用来控制子页面显示与否
  public produces = [];//用来保存第N页面需要显示的数据

  addPro() {
    this.uniqueHttpUrl.httpPost = true;
    this.produceImage=[];
    this.richText = '';
    this.inputValue = {articleTitle:'', newsDir: 2, catagoryId: 1};
    this.showBoolean = true;
  }

  comeFromPagination(event: Array<any>) {
    this.produces = event;
  }

  comeFromModalBoolean(event: boolean) {
    this.uniqueHttpUrl = {httpPost: false, httpGet: false, httpPut: false};
    this.showBoolean = event;
    this.ngOnInit();
    console.log("重新调用");
  }

  // showIndexChange(event){
  //   this.inputValue.showIndexWhehter=event.target.value;
  //   console.log(event.target.value)
  // }
  //设置添加产品页面全屏或者非全屏
  //fullScreenCheck:boolean=true;
  //fullScreenCheck2:boolean=false;
  // closeAddPro(){
  //     this.showBoolean=false;
  //     this.fullScreenCheck=true;
  //     this.fullScreenCheck2=false
  // }
  //设置产品上下架
  // proDown(index){
  //   // console.log(index)
  //   this.produceJson[index].online=!this.produceJson[index];
  //
  // }
  // childChange($event){
  //   console.log($event)
  // }
  //设置分页，每一页显示的数据
  // pagination(producesLists,pageAmount,g){
  //     //producesLists为json数组,n为一个页面需要显示的数量,g为显示哪一页.
  //     let i=producesLists.length;
  //     this.toggleProNum=i
  //     let j=Math.ceil(i/pageAmount);
  //     this.pageNum=j;
  //     let producePages=[];
  //     // console.log(j)
  //     for(let n=0;n<j;n++){
  //         producePages.push(producesLists.slice(n*pageAmount,(n+1)*pageAmount))
  //     }
  //     return producePages[g-1]
  // }
  // //改变产品列表内容
  // changeList(i){
  //     if(this.pageNum>=i&&i>=1){
  //         this.produces=this.pagination(this.produceJson,this.pageAmount,i);
  //         this.inputPageValte=i;
  //     }
  // }
  //点击产品时的事件
  // proClick(index){
  //      for(let produce of this.produces){
  //          produce.selectColor=false
  //         //  console.log(produce)
  //      }
  //      this.produces[index].selectColor=true
  // }
  //点击到第一页或者最后一页
  // goToLimit(i){
  //     this.produces=this.pagination(this.produceJson,this.pageAmount,i);
  //     this.inputPageValte=i
  // }
  // fullScreen(){
  //     if(this.fullScreenCheck){
  //         $(".publicArticle").css({
  //         padding:0
  //     })
  //     }else{
  //         $(".publicArticle").css({
  //         padding:"3%"
  //     })
  //     }
  //     this.fullScreenCheck=!this.fullScreenCheck
  //     this.fullScreenCheck2=!this.fullScreenCheck2
  // }

  //显示第一页面数据
  ngOnInit() {
    this.showLoading = true;
    this.uniqueHttpUrl = {httpPost: false, httpGet: false, httpPut: false};

    this.http.httpGet(this.getArticleUrl, this.getArticleListsParams)
      .subscribe((res) => {
        this.articleLists = res.results.newsList;
        this.showLoading = false;
        console.log(this.articleLists)
      })
  }


  //改变一页需要显示的数量
  // changeAmount(e){
  //     this.pageAmount=e.target.value
  //     this.produces=this.pagination(this.produceJson,this.pageAmount,1)
  // }


  //判断是否有被选中项
  noneChecked: boolean = false;
  produceIndex: number; //用来保存产品的下标
  checkSelected() {
    // for(let produce of this.produces){
    //     if(produce.selectColor==true){
    //         // console.log(111)
    //         return true;
    //     }
    // }
    for (let i = 0; i < this.produces.length; i++) {
      if (this.produces[i].selectColor == true) {
        this.produceIndex = i;
        return true
      }
    }
    return false;
  }

  modifyProduce() {
    let bool = this.checkSelected();
    if (!bool) {
      this.noneChecked = true;
      setTimeout(function () {
        this.noneChecked = false;
      }.bind(this), 2000)
    }

  }

  // 展示是否删除模态框
  showDeleteConfirm: boolean = false;

  editArticle(id) {
    this.showBoolean = true;
    this.uniqueHttpUrl.httpPut = true;
    let uniqueArticle: any = this.articleLists.filter((item) => item.id === id);
    console.log(uniqueArticle);
    this.inputValue = {articleTitle: uniqueArticle[0].title, newsDir: uniqueArticle[0].content, catagoryId: uniqueArticle[0].id};
    console.log(this.inputValue);
    this.produceImage = uniqueArticle[0].images;
    console.log(this.produceImage);
    this.richText= JSON.stringify(uniqueArticle[0].htmls[0]);
    console.log(this.richText);
  }

  deleteArticle(id) {
    this.showDeleteConfirm = true;
    console.log(id);
    this.articleId = id;
  }

  deleteProduceSure() {
    this.http.httpDelete(this.deleteArticleUrl, {id:this.articleId})
      .subscribe((res) => {
        this.showDeleteConfirm=false;
        this.ngOnInit();
        console.log('删除')
      })
  }

  closeConfirm() {
    this.showDeleteConfirm = false;
  }

  // //展示是否下架模态框
  // showtoggleOff:boolean=false;
  // producePid:number;
  // proDown(index){
  //   // console.log(index)
  //   this.producePid=index;
  //   this.showtoggleOff=true
  //   // this.produceJson[index-1].online=!this.produceJson[index-1];
  // }
  // toggleOffConfirmConcel(){
  //   this.showtoggleOff=false;
  // }
  // showtoggleOn:boolean=false
  // toggleOffProduceSure(){
  //   this.showtoggleOff=false;
  //   // this.showtoggleOn=true;
  //   this.produces[this.producePid].online=!this.produces[this.producePid].online;
  // }
  // modifySort() {
  //   $(".modifySort").show();
  // }
  //
  // closeSort() {
  //   $(".modifySort").hide();
  // }


}
